<template>
  <div class="creatlist">
    <div class="switchover">
      <van-tabs v-model="active" animated>
        <van-tab title="创建歌单">
       
        </van-tab>
        <van-tab
          title="收藏歌单"
          :to="{ name: 'liststar', params: { id: 1 } }"
        ></van-tab>
        <van-tab
          title="歌单助手"
          :to="{ name: 'listhelper', params: { id: 2 } }"
        ></van-tab>
      </van-tabs>
         <!-- 创建歌单 -->
          <van-cell is-link title="创建歌单" @click="show = true" icon="plus" />
          <van-action-sheet v-model="show" title="创建歌单">
            <div class="content">
              <van-cell-group get-container="#app">
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2510534250-ED215CF14CBF9805EE931A36D07B3CD2%2F0%3Ffmt%3Dgif%26size%3D20%26h%3D206%26w%3D300%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642218537&t=663cce553de493ed2066459de1872f2f"
                  alt=""
                />
                <van-field
                  v-model="value"
                  label="歌单名"
                  placeholder="请输入歌单名"
                />
                <div class="btn">
                  <van-button type="info" @click="onSave(value)" size="small"
                    >确定</van-button
                  >
                  <van-button type="warning" size="small">取消</van-button>
                </div>
              </van-cell-group>
            </div>
          </van-action-sheet>

          <!-- 我的喜欢 -->
          <div class="wdx" @click="skip()">
            <van-image class="img" width="60" height="60" :src="list.picUrl" />
            <ul>
              <li>我喜欢的音乐</li>
              <span>{{ lis.length }}首</span>
            </ul>
          </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Icon } from "vant";
import { Toast } from "vant";

Vue.use(Icon);
Vue.use(Tab);
Vue.use(Tabs);
import { getestablishAPI } from "../../../api/song";
import { WdxihAPi, WWdxihAPI } from "../../../api/wdxh";
export default {
  name: "creatlist",
  data() {
    return {
      id: "",
      active: 5,
      list: [],
      lis: [],
      result: [],
      show: false,
      value: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    let uid = localStorage.getItem("uid");
    //调用我的喜欢
    this.ood(uid);
    // this.onSave(value);

    //  获取路由传来的id
    this.id = this.$route.params.id;
    console.log(this.id);
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //添加歌单
    async onSave(value) {
      console.log(value);
      const result = await getestablishAPI(value);
      console.log(result);
      if (result.code === 200) {
        Toast.success("创建成功");
        this.$router.go(0);
      } else {
        Toast.fail("创建失败");
      }
    },

    //歌单列表id
    async ood(ids) {
      const rustr = await WdxihAPi(ids);
      console.log(rustr);
      this.rustr = rustr.ids;
      const res2 = await WWdxihAPI(this.rustr.join(","));
      this.list = res2.songs[0].al;
      this.lis = res2.songs;
      // console.log(this.list);
    },
    //点击喜欢跳转
    skip() {
      this.$router.push({
        path: `/mylove/${this.list.id}`,
      });
    },
  },
};
</script>

<style scoped>
html {
  height: 100%;
}
.switchover .van-icon {
  font-size: 30px;
  position: absolute;
  margin-left: 85%;
  margin-top: 25px;
  color: #555;
}
.switchover {
  position: relative;
  width: 90%;
  margin: 20px auto 0;
}
/* 我喜欢的音乐 */
.wdx {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 95%;
  margin: 0 auto;
  height: 70px;
  background-color: #ffffff;
  border-radius: 15px;
  margin-bottom: 20px;
}
.wdx .img {
  border-radius: 5px;
  margin-left: 5px;
  padding: 5px;
}
.wdx ul {
  flex: 1;
}
.wdx ul li {
  margin-bottom: 8px;
}

.van-action-sheet {
  height: 50%;
}
.van-icon-arrow {
  display: none;
}
.van-icon {
  display: none;
}
.onSave {
  display: none;
}
.content img {
  width: 50%;
  height: 50%;
  /* justify-content: center; */
  padding-left: 25%;
}
</style>
